<!DOCTYPE html>
<html>

<head>
	<title>日记</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalabel=no, minimum-scale=1.0, maximum-scale=1.0">
	<link rel="stylesheet" type="text/css" href="/static/diary/css/rijiZW.css" />
	<link rel="stylesheet" href="/static/common/css/mescroll.min.css" />
	<style>
		[v-cloak] {
			    display: none !important;
			}
		body{
			-webkit-overflow-scrolling : touch;
		}
		.loading{
			width: 100%;
			height:100%;
			background-color: rgba(0,0,0,0.5);
			z-index: 999999;
			text-align: center;
			padding-top: 17rem;
			position: absolute;
			top:0;
			left:0;
		}
	</style>
</head>

<body>
	<div class="loading">加载中......</div>
	<div id="mescroll" class="mescroll" v-cloak>
		<section>
			<div id="banner">
				<img v-bind:src="diary_logo" class="banner">
				<!-- 话题 -->
				<div id="huati">
					<div class="huati_t">
						<h3>话题：[diary_name]</h3>
						<!-- <p><img src="./assets/Group 9.png"><span>853条点评</span></p> -->
						<p>笔者 | <span>[editor_name]</span></p>
					</div>
				</div>
			</div>
			<!-- 正文 -->
			<div id="zhengwen">
				<div class="zhengwen_k">
					<p class="ui">[diary_content]</p>
				</div>
				<p class="end">～END～</p>
			</div>
			<!-- 活动通告 -->
			<div id="huodongTG" style='display:none;'>
				<p><label>活动通告 | </label><span class="xianshi">#限时体验</span></p>
				<!-- <div class="huodongTG_quan"> -->
				<div class="huodongTG_quan_t">
					<div>
						<img id='goodsImg' v-bind:src="goods_img" />
					</div>
					<div class="wen">
						<p id='goodsName'>[goods_name]</p>
						<p>[introduce]</p>
						<div class="wen_b">
							<p><span><!--<img src="/static/diary/assets/Oval 2.png" class="juli">--></span><label>[distance]</label></p>
							<div class="jiage">¥[goods_price]</div>
						</div>

					</div>
				</div>
				<div class="huodongTG_quan_b">
					<div style='width:13rem;'>地址：[address]</div>
					<img src="/static/diary/assets/Group 18.png" class="quan" id='goodsId' onclick='go(this)' v-bind:goods_id=[goods_id] />
				</div>
				<!-- </div> -->
				<div class="huodongTG_fx">
					<label>#限时体验-分享SHARE</label><span id='share_weixin' style='position: absolute;right: 0.8rem;'></span>
				</div>
			</div>
		</section>
		<!--热门评论-->
		<div class="hot-review">
			<p><label>热门评论  </label><!--<span class="xianshi">12387</span>--></p>
			<div id="comments-list" class="comments-list">
				<div class="comment-item" v-for="(value, key) in commentList">
					<div class="footer_toux">
						<img v-bind:src="value.avatar" style="height: 2.1rem;width: 2.1rem;border-radius: 50%;" />
					</div>
					<div class="footer_wenti">
						<p class="wangming">[value.username]</p>
						<p class="riqi">[value.ctime]</p>
						<template v-if="value.content">
							<p class="wenda">
								<label class="lan">问：</label><span class="answerContent">[value.content]？</span>
							</p>
						</template>
						<template v-if="value.childCmt" v-for="item of value.childCmt">
							<p class="wenda">
								<label class="lan">回复：</label><span class="answerContent">[item.content]</span>
							</p>
						</template>
					</div>
				</div>
			</div>
		</div>
		<!-- 说点什么 -->
		<div id="shuru" style="z-index:99999;">
			<div class="fanhui"><!--<img src="/static/diary/assets/arrow-left.png">--></div>
			<button class="tiaoPL">说点什么吧</button>
			<div class="dianzan" id='dianzan'>
				<span class="di">[zan_num]</span>
			</div>
			<div class="fenx">
				<span class="di">分享</span>
			</div>
		</div>
	</div>
	
</body>
<!--<script type="text/javascript" src="/static/common/js/zepto.js"></script>-->
<script type="text/javascript" src="/static/common/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="/static/diary/js/rijiZW.js"></script>
<script type="text/javascript" src="/static/common/js/mescroll.min.js"></script>
<script type="text/javascript" src="/static/common/js/vue.js"></script>
<script type="text/javascript" src="/static/common/js/jockey.min.js"></script>
<script type="text/javascript" src="/static/common/js/public.js"></script>
<script type="text/javascript">
	// 评论下拉添加
	var gid = {{gid}};
	(function () {
		// 接口
		var Api = {
			base: 'https://clubbear.clubbear.cn',
			riji: '/diary/GetLeftComment',
			rijiList: 'diary/GetRecomDiary',
			dianzan: '/diary/AgreeZan',
			pinglun: '/diary/CommitComment'
		}
		
		// 获取数据的方法
		function getListDataFromNet(pageNum, pageSize, successCallback, errorCallback) {
			$.ajax({
				url: Api.base + Api.riji,
				data: {
					diary: gid,
					page: pageNum,
					cnum: pageSize
				},
				type: 'post',
				dataType: 'json',
				success: function (res) {
					successCallback && successCallback(res.data)
				},
				error: function (xhr, state, err) {
					errorCallback && errorCallback(err)
				}
			})
		}

		// 主vue数据
		var main = new Vue({
			el: '#mescroll',
			delimiters: ['[', ']'],
			data: {
				mescroll: null,
				commentList: [],
				diary_logo: null,
				editor_name: null,
				diary_name: null,
				diary_content: null,
				content: null,
				avatar: null,
				username: null,
				goods_name: null,
				introduce: null,
				distance: null,
				goods_price: null,
				goods_img: null,
				address: null,
				goods_id: null,
				zan_num:null
			},
			methods: {
				upCallback: function (page) {

					var self = this;
					// console.log('获取数据成功，page.num=', page.num, 'page.size=', page.size)

					getListDataFromNet(page.num, page.size, function (data) {
						if (page.num == 1) self.commentList = [];
						self.commentList = self.commentList.concat(data);

						self.mescroll.endSuccess(data.length);
					}, function (err) {
						console.log('获取数据失败', err)
					})
				}
			},
			mounted: function () {
				var self = this;
				// 滑动加载
				self.mescroll = new MeScroll('mescroll', {
					up: {
						callback: self.upCallback,
						page: {
							size: 5
						}
					},
					// 锁定上拉恢复
					down: {
						isLock: true
					}
				});
				// 其他动态数据
				$.ajax({
					url: Api.base + '/diary/GetDiaryDetail?diary='+gid+'&cnum=1',
					type: 'post',
					dataType: 'json',
					success: function (data) {
						//console.log('获得的数据是。。。', data.data);
						var diaryData = data.data.diaryData; //diaryData
						var comment = data.data.comment; //comment
						var recGoods = data.data.recGoods;
						if( recGoods ){
							$('#huodongTG').show();
							self.goods_name = recGoods.goods_name;
							self.introduce = recGoods.introduce;
							self.distance = recGoods.distance;
							self.goods_price = recGoods.sale_price;
							self.goods_img = recGoods.goods_img;
							self.address = recGoods.address;
							self.goods_id = recGoods.id;
						}

						self.zan_num = diaryData.zan_num;
						self.diary_logo = diaryData.diary_logo;
						self.editor_name = diaryData.editor_name;
						self.diary_name = diaryData.diary_name;
						self.diary_content = diaryData.diary_content;
						self.content = comment.content;
						self.avatar = comment.avatar;
						self.username = comment.username;
						$(".loading").hide();
					},
					error: function (xhr, data, err) {
						console.log('获取数据失败', err)
					}
				})
			}
			
		})

		// 点赞数据
		$("#dianzan").click(function (e) {		
			e.preventDefault()
			e.stopPropagation();
			var dianzanCount ,dianzanCount2 = 0;
			if( loginCall() ){
				if( $(this).attr('class') == 'liangdianzan' ){
					//alert(1)
					$(this).find('span').text( parseInt( $(this).find('span').text() ) - 1 )
					$(this).removeClass('liangdianzan').addClass('dianzan');
					$.ajax({
						type: "post",
						url: Api.base + Api.dianzan,
						data:{
							did:gid
						},
						dataType: "json",
						success: function (data) {
							//console.log(data)
						},
						error: function (data) {
							//console.log(data)	
						}
	
					});
				}else{
					//alert(2)
					$(this).removeClass('dianzan').addClass('liangdianzan');
					$(this).find('span').text( parseInt( $(this).find('span').text() ) + 1 )
					$.ajax({
						type: "post",
						url: Api.base + Api.dianzan,
						data:{
							did:gid
						},
						dataType: "json",
						success: function (data) {
							//console.log(data)
						},
						error: function (data) {
							//console.log(data)	
						}
	
					});
				}
			}
		})
		
			// 点击下方的left箭头返回
		$('.fanhui').click(function(){
			window.location.href=Api.base + "/diary/rijiDP.html";
		})
		// 点击下方的灰色按钮进入评论页面
		$('.tiaoPL').click(function(){
		//	window.location.href=Api.base + "/diary/pinglun.html";
		//alert(gid)	
			Jockey.send('pailexiong',{key:'pinglun',data:gid})
		})
		//日记分享
		$('.fenx').on('click',function(){
			//alert('imgUrl:' + $('.banner').attr('src') + ',link:' + window.location.href + ',title:' + $('#huati').find('h3').text());
			Jockey.send("pailexiong", {key: 'share', data: {'desc':'','imgUrl':$('.banner').attr('src'),'key':'share','link':window.location.href,'title':$('#huati').find('h3').text()} });	
		})
		//活动分享
		$('#share_weixin').on('click',function(){
			var id = $('#goodsId').attr('goods_id');
			var url = Api.base+'/product/ExpressDel.html?gid=' + id;
		//	alert('imgUrl:' + $('#goodsImg').attr('src') + ',link:' + url + ',title:' + $('#goodsName').text());
			Jockey.send("pailexiong", {key: 'share', data: {'desc':'','imgUrl':$('#goodsImg').attr('src'),'key':'share','link':url,'title':$('#goodsName').text()} });	
		})

	})()
	function go( obj ){
		
		var id = $(obj).attr('goods_id');
		window.location.href = '/product/ExpressDel.html?gid=' + id;
		//Jockey.send("pailexiong",{key:'tiyan',data:gid});
	}
	// 获取接口数据diary/GetDiaryDetail?diary=4&latitude=20.5&longitude=23.6&cnum=1
	// http://101.201.150.188:8087/index/admin?type=2
</script>

</html>
